 <template>
  <el-dialog
    class="dialogDetail"
    :title="dialogTitle"
    :visible.sync="dialogVisible"
    :width="dialogWidth?dialogWidth:'70%'"
    :close-on-click-modal="false"
    :custom-class="dialogClass?dialogClass:''"
    :append-to-body="appendBody?true:false"
  >
    <template v-if="dialogHeader && dialogHeader.isShow">
      <div slot="title" class="dialog-header-title">
          <i :class="`iconfont ${dialogHeader.icon}`" aria-hidden="true" ></i>
          <span>{{dialogHeader.title}}</span>
        </div>
    </template>
    <slot></slot>
    <span slot="footer" class="dialog-footer">
   <template v-if="!isNotShowDefaultBtn">
    <template v-if="btnDialogArr && btnDialogArr.length>0">
      <span v-for="(item,index) in btnDialogArr" :key="index">
      <button_item :btnItemLabel='item.label' :btnItemType="item.type?item.type:'primary'"  @onBtnItemClick="onBtnDialogClick(item.name)" />
      </span>
    </template>
    <template v-else>
      <button_item btnItemType="plain" :btnItemLabel='$t("cancel")' @onBtnItemClick="onBtnDialogClick('cancel')" />
      <button_item :btnItemLabel='$t("confirm")' @onBtnItemClick="onBtnDialogClick('confirm')" v-if="isShowConfirmBtn" />
      <button_item :btnItemLabel='$t("save")' @onBtnItemClick="onBtnDialogClick('save')"  v-else/>
    </template>
   </template>
    </span>
  </el-dialog>
  
</template>

<script>
export default {
  name: "dialog_item",
  props: ["dialogTitle", "visible","dialogWidth","isNotShowDefaultBtn","isShowConfirmBtn","btnDialogArr","appendBody",'dialogClass','dialogHeader'],
  data() {
    return {};
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      },
    },
  },
  methods: {
    onBtnDialogClick(name) {
     if(name=='cancel'){
        this.dialogVisible=false
      }
      this.$emit("onBtnDialogClick", name);
    },
  },
};
</script>

<style>
</style>